<template>
  <div v-loading="initialing">
    <div class="alert alert-dashed mgb20">
      <span class="h3" >
        <span>退款单号: </span><span>{{refund.refundNumber}}</span>
        <span style="margin-left:20px;">状态: </span>
        <span>{{RefundStatus[refund.status]}}</span>
      </span>
      <div class="actions">
        <el-button v-if="refund.status==1" type="success" @click="approve()">开始退款</el-button>
        <el-button v-if="refund.status==1" type="danger" @click="reject()">关闭退款</el-button>
        <el-button v-if="refund.status==3" type="warning" @click="refundToBalance()">退回账户余额</el-button>
      </div>
    </div>
    <div class="box">
      <h3>退款信息</h3>
      <table class="box-body ui blue table">
        <tbody>
          <tr>
            <td>订单号</td>
            <td>分销商</td>
            <td>退款总额</td>
            <td>申请人</td>
            <td>申请时间</td>
            <td>备注</td>
          </tr>
          <tr>
            <td>
              <router-link :to="{'path': '/order/show', query: {'orderNumber': refund.orderNumber}}">
                {{refund.orderNumber}}
              </router-link>
            </td>
            <td>{{refund.dtbName}}</td>
            <td>{{refund.total/100|currency('￥')}}</td>
            <td>
                <span v-if="refund.refundNumber" 
                  v-text="refund.createUserName + '&lt;' + refund.createUserEmail + '&gt;'">
                </span>
            </td>
            <td>{{refund.createdOn}}</td>
            <td>{{refund.remark}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="box">
      <h3>退款详情</h3>
      <table class="box-body ui blue table">
        <tbody>
          <tr>
            <td>游客姓名</td>
            <td>出票状态</td>
            <td>售价</td>
            <td>退款金额</td>
          </tr>
          <tr v-for="item in refund.items" :key="item.id">
            <td v-text="item.traveller.name"></td>
            <td v-text="OrderTravellerStatus[item.traveller.status]"></td>
            <td>{{item.salePrice/100|currency('￥')}}</td>
            <td>{{item.refundAmount/100|currency('￥')}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="box" v-if="refund.logs.length>0">
      <h3>订单日志</h3>
      <div class="box-body">
        <op-log :logs="refund.logs"/>
      </div>
    </div>
  </div>
</template>

<script>
import { Refund } from '@/store/api'
import OpLog from '@/components/op-log'
import { RefundStatus, OrderTravellerStatus } from '@/constants'

export default {
  components: {
    OpLog
  },
  created() {
    this.displayRefund()
  },
  data() {
    return {
      RefundStatus: RefundStatus,
      OrderTravellerStatus: OrderTravellerStatus,
      initialing: true,
      refund: {
        logs: []
      }
    }
  },
  methods: {
    displayRefund() {
      Refund.display(this.$route.query.refundNumber).then((refund) => {
        this.refund = refund
        this.initialing = false
      })
    },
    reject() {
      Refund.reject(this.$route.query.refundNumber).then((refund) => {
        this.displayRefund()
        this.$message.success('操作成功，退款单已关闭')
      })
    },
    approve() {
      Refund.approve(this.$route.query.refundNumber).then((refund) => {
        this.displayRefund()
        this.$message.success('操作成功，请开始退款')
      })
    },
    refundToBalance() {
      Refund.refund(this.$route.query.refundNumber).then((refund) => {
        this.displayRefund()
        this.$message.success('操作成功，已退回账户余额')
      })
    }
  }
}
</script>
